<!-- src/components/EventModal.vue -->
<template>
  <div v-if="visible" class="modal-mask">
    <div class="modal-container">
      <!-- 头部 -->
      <div class="modal-header">
        <h2 class="title">{{ event.title }}</h2>
        <div class="sentiment">
          <span>情感分析：</span>
          <span :class="sentimentClass">{{ event.sentiment }}</span>
        </div>
        <button class="close-btn" @click="close">×</button>
      </div>

      <!-- 主体内容 -->
      <div class="modal-body">
        <div class="info-grid">
          <div class="info-item">
            <label>发生时间：</label>
            <span>{{ event.date }}</span>
          </div>
          <div class="info-item">
            <label>相关评论数：</label>
            <span>{{ event.comments }}</span>
          </div>
          <div class="info-item">
            <label>主要地区：</label>
            <span>{{ event.region }}</span>
          </div>
          <div class="info-item">
            <label>主要平台：</label>
            <span>{{ event.platform }}</span>
          </div>
          <div class="info-item">
            <label>相关文章数：</label>
            <span>{{ event.articles }}</span>
          </div>
          <div class="info-item">
            <label>关键词：</label>
            <div class="keywords">
              <span 
                v-for="(word, i) in event.keywords.slice(0, 3)" 
                :key="i" 
                class="keyword-tag"
              >
                {{ word }}
              </span>
            </div>
          </div>
        </div>
        <div class="description">
          <h3 class="description-title">事件简述</h3>
          <div class="scroll-content">
            {{ event.description }}
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="modal-footer">
        <button class="analysis-btn state0" @click="handleAnalysisInit" v-if="event.eventstate==0">舆情初始化</button>
        <button class="analysis-btn state1" @click="handleAnalysisUpdate" v-if="event.eventstate==1">舆情更新</button>
        <button class="analysis-btn" @click="handleAnalysisCheck" v-if="event.eventstate==2">舆情分析结果</button>
        <button class="analysis-btn Aloading" v-if ="event.eventstate==-event.id" disabled="true">舆情更新中...</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed,ref,watch } from 'vue'
import { defineProps,defineEmits } from 'vue';
//import { test } from "@/api/analysis"
import { useRouter } from 'vue-router' // 引入 useRouter
const router = useRouter() // 使用 useRouter 获取 router 实例
import  UserSotre from '@/store/AnalysisStore.js'
const userStore = UserSotre()
const props = defineProps({
  visible: Boolean,
  event: {
    type: Object,
    default: () => ({
      eventstate: 0,
      title: '默认标题',
      sentiment: '中性',
      date: '2023-01-01',
      comments: 0,
      region: '未知地区',
      platform: '未知平台',
      articles: 0,
      keywords: [],
      description: '暂无描述'
    })
  }
})


const event = ref(props.event)

watch(
  () => props.event,
  (newVal) => {
    event.value = newVal
  }
)
const emit = defineEmits(['close',"initEvent"])

const sentimentClass = computed(() => ({
  positive: props.event.sentiment === '积极',
  neutral: props.event.sentiment === '中性',
  negative: props.event.sentiment === '消极'
}))

const close = () => emit('close')
const initEvent = () =>emit('initEvent', event.value.id)
const handleAnalysisCheck = () => {
  userStore.setAnalysis(event.value)
  router.push({
    path: '/analysis',
    query: { eventId: event.value.id } // 修改为使用 event.id
  }) 
}
const handleAnalysisInit = async () => {
  await initEvent(event.value.id)
}

const handleAnalysisUpdate = async () => {

}
</script>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  width: 800px;
  background: rgb(255, 255, 255);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.title {
  margin: 0;
  color: rgb(0, 0, 0);
  font-size: 20px;
  flex: 1;
}

.sentiment span:last-child {
  padding: 4px 8px;
  border-radius: 4px;
  margin-left: 8px;
}

.positive { background: #e6ffed; color: #389e0d; }
.neutral { background: #fffbe6; color: #d48806; }
.negative { background: #fff1f0; color: #cf1322; }

.close-btn {
  cursor: pointer;
  border: none;
  background: none;
  font-size: 24px;
  color: #999;
  margin-left: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  color: rgb(0, 0, 0);
  gap: 16px;
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  color: rgb(0, 0, 0);
  align-items: baseline;
}

.info-item label {
  color: rgb(0, 0, 0);
  min-width: 100px;
}

.keywords {
  display: flex;
  color: rgb(255, 255, 255);
  flex-wrap: wrap;
  gap: 8px;
}

.keyword-tag {
  background: #085ca5;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.description {
  color: rgb(0, 0, 0);
  border-top: 1px solid #eee;
  padding-top: 0px;
}

.scroll-content {
  max-height: 200px;
  overflow-y: auto;
  line-height: 1.6;
  padding: 8px 0;
}

.modal-footer {
  border-top: 1px solid #eee;
  padding-top: 16px;
  text-align: right;
}

.analysis-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.analysis-btn:hover {
  opacity: 0.8;
}

.description-title{
  margin: 0;
}
.state0{
  background:green
}
.state1{
  background:rgb(187, 187, 8)
}
.Aloading{
  background:rgb(67, 67, 63)
}
</style>